<div class="wrapper">
    <app-breadcrumb [path]="path"></app-breadcrumb>
    <app-tabs [tabs]="tabs" (onSelect)="selectTab($event)"></app-tabs>
    <app-scrollview class="scrollview" *ngIf="selectedTab" [ngSwitch]="selectedTab.key">
        <div *ngSwitchCase="'workflow_template'" class="ui grid">
            <div class="thirteen wide column">
                <app-workflow-template-form mode="edit" [loading]="loading" [workflowTemplate]="workflowTemplate"
                    [groups]="groups" [errors]="errors" (save)="saveWorkflowTemplate($event)" (delete)="deleteWorkflowTemplate()"></app-workflow-template-form>
            </div>
            <div class="three wide column">
                <app-workflow-template-help></app-workflow-template-help>
                <ng-container *ngIf="workflowTemplate">
                    <br />
                    <div class="field" *ngIf="workflowTemplate.first_audit">
                        <h3>{{ "common_created_by" | translate }}</h3>
                        {{ workflowTemplate.first_audit.triggered_by }}
                    </div>
                    <br />
                    <div class="field" *ngIf="workflowTemplate.last_audit">
                        <h3>{{ "common_last_modified" | translate }}</h3>
                        {{ workflowTemplate.last_audit.created }}
                    </div>
                </ng-container>
            </div>
        </div>
        <div *ngSwitchCase="'audits'" class="ui grid">
            <div class="sixteen wide column">
                <app-data-table [withPagination]="10" [columns]="columnsAudits" [data]="audits" [loading]="loadingAudits"
                    [withLineClick]="true" (clickLine)="clickAudit($event)"></app-data-table>
            </div>
            <div class="sixteen wide column">
                <app-diff-list *ngIf="diffItems" [items]="diffItems"></app-diff-list>
            </div>
        </div>
        <div *ngSwitchCase="'instances'" class="ui grid">
            <div class="sixteen wide column centered">
                <button class="ui primary button" (click)="clickCreateBulk()">
                    <i class="folder icon"></i>{{ 'workflow_template_btn_create_bulk' | translate }}
                </button>
            </div>
            <div class="sixteen wide column">
                <app-data-table [withPagination]="10" [columns]="columnsInstances" [data]="instances" [loading]="loadingInstances"></app-data-table>
            </div>
        </div>
        <div *ngSwitchCase="'usage'" class="ui grid">
            <div class="sixteen wide column">
                <div class="ui active centered inline loader" *ngIf="loadingUsage"></div>
                <ng-container *ngIf="!loadingUsage">
                    <app-usage [workflows]="usages"></app-usage>
                    <div class="centered" *ngIf="!usages || usages.length === 0">{{'workflow_template_no_usage'
                        | translate}}</div>
                </ng-container>
            </div>
        </div>
    </app-scrollview>
</div>
<app-workflow-template-apply-modal #templateApplyModal [workflowTemplate]="workflowTemplate" [workflowTemplateInstance]="selectedWorkflowTemplateInstance"
    (close)="modalClose()">
</app-workflow-template-apply-modal>
<app-workflow-template-bulk-modal #templateBulkModal [workflowTemplate]="workflowTemplate" (close)="modalClose()"></app-workflow-template-bulk-modal>
